<template>
  <div class="newSchedul">
    <el-form ref="scheduleForm" :model="scheduleForm" :rules="scheduleRules" label-width="120px">
      <div class="nav-title">日程信息</div>
      <el-form-item label="课程" prop="course">
        <el-button v-if="!scheduleForm.course" @click="selectCourseDialog=true">选择课程</el-button>
        <div v-if="scheduleForm.course" class="course-tag">
          <div class="course-title">{{ scheduleForm.course }}</div>
          <el-button
            v-if="scheduleForm.course&&!scheduleForm.id"
            @click="selectCourseDialog=true"
          >更换课程</el-button>
        </div>
      </el-form-item>
      <el-form-item label="重复设置">
        <el-radio-group v-model="scheduleForm.repeat">
          <el-radio label="noRepeat">不重复</el-radio>
          <el-radio label="dayRepeat">按天重复</el-radio>
          <el-radio label="weekRepeat">按周重复</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上课日期" prop="classDate">
        <el-date-picker v-model="scheduleForm.classDate" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item v-if="scheduleForm.repeat!=='weekRepeat'" label="上课时间" prop="endClassTime">
        <div v-if="scheduleForm.repeat!=='weekRepeat'">
          <el-time-select
            v-model="scheduleForm.startClassTime"
            :picker-options="{
              start: '08:00',
              step: '00:10',
              end: '21:00'
            }"
            placeholder="起始时间"
          />
          <span>&nbsp; 至&nbsp;&nbsp;</span>
          <el-time-select
            v-model="scheduleForm.endClassTime"
            :picker-options="{
              start: '08:00',
              step: '00:10',
              end: '21:00',
              minTime: scheduleForm.startClassTime
            }"
            placeholder="结束时间"
          />
        </div>
      </el-form-item>
      <el-form-item v-show="scheduleForm.repeat=='weekRepeat'" label="上课时间">
        <div class="chargeStandard">
          <el-table
            :data="scheduleForm.weekTimeList"
            :header-cell-style="{background:'#fafbfc',color:'#606266'}"
          >
            <el-table-column label="天" width="120">
              <template slot-scope="scope">
                <el-select v-model="scope.row.week" placeholder="请选择" style="width:100px;">
                  <el-option
                    v-for="item in weekOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="上课时间段" align="center" width="600">
              <template slot-scope="scope">
                <el-time-select
                  v-model="scope.row.startTime"
                  :picker-options="{
                    start: '08:00',
                    step: '00:10',
                    end: '21:00',
                  }"
                  placeholder="起始时间"
                />
                <span>&nbsp; 至&nbsp;&nbsp;</span>
                <el-time-select
                  v-model="scope.row.endTime"
                  :picker-options="{
                    start: '08:00',
                    step: '00:10',
                    end: '21:00',
                    minTime: scope.row.startTime
                  }"
                  placeholder="结束时间"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="right">
              <template slot-scope="scope">
                <el-button type="text" @click="hourRemove(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="add-foot">
            <el-button type="text" icon="el-icon-plus" @click="addHour">添加课时</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="scheduleForm.repeat!=='noRepeat'" label="结束方式">
        <el-radio-group v-model="scheduleForm.finishWay">
          <el-radio label="sum">按日程总数</el-radio>
          <el-radio label="date">按日期结束</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="scheduleForm.repeat!=='noRepeat'&&scheduleForm.finishWay=='date'"
        label="结束日期"
        prop="endDate"
      >
        <el-date-picker v-model="scheduleForm.endDate" type="date" placeholder="选择日期" />
      </el-form-item>
      <el-form-item
        v-if="scheduleForm.repeat!=='noRepeat'&&scheduleForm.finishWay=='sum'"
        label="排课总数"
        prop="courseSum"
      >
        <el-input v-model="scheduleForm.courseSum" placeholder="本次要排的日程总数" style="width: 300px;">
          <template slot="append">个日程</template>
        </el-input>
      </el-form-item>
      <el-form-item label="扣课时数" prop="deductHour">
        <el-input v-model="scheduleForm.deductHour" style="width: 300px;">
          <template slot="append">课时</template>
        </el-input>
      </el-form-item>
      <el-form-item label="校区" prop="campus">
        <el-button v-if="!scheduleForm.campus" @click="selectCampusDialog=true">选择校区</el-button>
        <div v-if="scheduleForm.campus" class="course-tag">
          <div class="course-title">{{ scheduleForm.campus }}</div>
          <el-button v-if="scheduleForm.campus" @click="selectCampusDialog=true">更换校区</el-button>
        </div>
      </el-form-item>
      <el-form-item label="上课教室">
        <el-button v-if="!scheduleForm.classRoom" @click="selectClassroomDialog=true">选择教室</el-button>
        <div v-if="scheduleForm.classRoom" class="course-tag">
          <div class="course-title">{{ scheduleForm.classRoom }}</div>
          <el-button v-if="scheduleForm.classRoom" @click="selectClassroomDialog=true">更换教室</el-button>
        </div>
      </el-form-item>
      <el-form-item label="老师">
        <el-button v-if="!scheduleForm.teacher" @click="selectTeacherDialog=true">选择老师</el-button>
        <div v-if="scheduleForm.teacher" class="course-tag">
          <div class="course-title">{{ scheduleForm.teacher }}</div>
          <el-button v-if="scheduleForm.teacher" @click="selectTeacherDialog=true">更换老师</el-button>
        </div>
      </el-form-item>
      <div class="nav-title">预约设置</div>
      <el-form-item label="是否需要预约">
        <el-radio-group v-model="scheduleForm.reserver">
          <el-radio label="open">开启</el-radio>
          <el-radio label="close">关闭</el-radio>
        </el-radio-group>
        <el-form-item
          v-if="scheduleForm.reserver=='open'"
          label="人数上限"
          prop="maxPerson"
          style="margin-left:-50px;"
        >
          <el-input v-model="scheduleForm.maxPerson" style="width:200px;">
            <template slot="append">人</template>
          </el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item v-if="scheduleForm.reserver=='open'" label="开启预约时间">
        <el-radio-group v-model="scheduleForm.reserverTime">
          <el-radio label="now">立即开始月月</el-radio>
          <el-radio label="before">
            <span>提前&nbsp;&nbsp;</span>
            <el-input
              v-model="scheduleForm.beforTime"
              :disabled="scheduleForm.reserverTime=='now'"
              size="small"
              style="width:50px;"
            />
            <span>&nbsp;&nbsp;天预约</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="foot-btn">
      <el-button @click="cancelForm">取消</el-button>
      <el-button type="primary" @click="saveForm">保存</el-button>
    </div>
    <!-- 选择课程弹框 -->
    <createCourseDialog
      :dialog="selectCourseDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmCourseClick"
    />
    <!-- 选择校区弹框 -->
    <createCampusDialog
      :dialog="selectCampusDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmCampusClick"
    />
    <!-- 选择教室弹框 -->
    <createClassroomDialog
      :dialog="selectClassroomDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmClassroomClick"
    />
    <!-- 选择老师弹框 -->
    <createTeacherDialog
      :dialog="selectTeacherDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmTeacherClick"
    />
  </div>
</template>

<script>
import createCourseDialog from '../class/coursedialog'
import createCampusDialog from '../classroom/campusdialog'
import createClassroomDialog from './classroomdialog'
import createTeacherDialog from './teacherdialog'

export default {
  components: {
    createCourseDialog,
    createCampusDialog,
    createClassroomDialog,
    createTeacherDialog
  },
  data() {
    return {
      scheduleForm: {
        id: '11',
        course: '',
        courseId: '',
        repeat: 'noRepeat',
        classDate: '',
        startClassTime: '',
        endClassTime: '',
        finishWay: 'sum',
        endDate: '',
        courseSum: '',
        campus: '',
        campusId: '',
        classRoom: '',
        classRoomId: '',
        teacher: '',
        teacherId: '',
        reserver: 'open',
        maxPerson: '',
        reserverTime: 'now',
        beforTime: '',
        weekTimeList: [
          {
            week: '',
            startTime: '',
            endTime: ''
          }
        ]
      },
      weekOptions: [
        {
          value: 'Monday',
          label: '周一'
        },
        {
          value: 'Tuesday',
          label: '周二'
        },
        {
          value: 'Wednesday',
          label: '周三'
        },
        {
          value: 'Thursday',
          label: '周四'
        },
        {
          value: 'Friday',
          label: '周五'
        },
        {
          value: 'Saturday',
          label: '周六'
        },
        {
          value: 'weekday',
          label: '周日'
        }
      ],
      scheduleRules: {
        course: [{ required: true, message: '请选择课程', trigger: 'blur' }],
        classDate: [{ type: 'date', required: true, message: '请选择上课日期', trigger: 'blur' }],
        endClassTime: [{ required: true, message: '请选择上课时间', trigger: 'blur' }],
        endDate: [{ type: 'date', required: true, message: '请选择结束日期', trigger: 'blur' }],
        courseSum: [{ required: true, message: '请选择排课总数', trigger: 'blur' }],
        deductHour: [{ required: true, message: '请输入扣课时数', trigger: 'blur' }],
        campus: [{ required: true, message: '请选择校区', trigger: 'blur' }],
        maxPerson: [{ required: true, message: '请输入人数上限', trigger: 'blur' }],
      },
      selectCourseDialog: false,
      selectCampusDialog: false,
      selectClassroomDialog: false,
      selectTeacherDialog: false
    }
  },
  methods: {
    cancelClick() {
      this.selectCourseDialog = false
      this.selectCampusDialog = false
      this.selectClassroomDialog = false
      this.selectTeacherDialog = false
    },
    // 接收选择课程弹框事件
    confirmCourseClick(data) {
      this.selectCourseDialog = false
      this.scheduleForm.courseId = data.id
      this.scheduleForm.course = data.name
    },
    // 接收选择校区弹框事件
    confirmCampusClick(data) {
      this.selectCampusDialog = false
      this.scheduleForm.campus = data.name
      this.scheduleForm.campusId = data.id
    },
    // 接收选择教室弹框事件
    confirmClassroomClick(data) {
      this.selectClassroomDialog = false
      this.scheduleForm.classRoom = data.name
      this.scheduleForm.classRoomId = data.id
    },
    // 接收选择老师弹框事件
    confirmTeacherClick(data) {
      this.selectTeacherDialog = false
      this.scheduleForm.teacher = data.name
      this.scheduleForm.teacherId = data.id
    },
    // 添加课时
    addHour() {
      this.scheduleForm.weekTimeList.push({
        week: '',
        startTime: '',
        endTime: ''
      })
    },
    // 删除课时
    hourRemove(index) {
      if (this.scheduleForm.weekTimeList.length > 1) {
        this.scheduleForm.weekTimeList.splice(index, 1)
      } else {
        this.$message.error('至少保留一条数据')
      }
    },
    // 保存
    saveForm() {
      var isSubmit = true
      this.scheduleForm.weekTimeList.map((item) => {
        if (!item.week || !item.startTime || !item.endTime) {
          this.$message({
            message: '请完善上课时间信息',
            type: 'warning'
          })
          isSubmit = false
        }
      })

      this.$refs.scheduleForm.validate((valid) => {
        if (valid) {
          if (isSubmit) {
            this.$refs.scheduleForm.resetFields()
            alert('通过')
          }
        } else {
          return false
        }
      })
    },
    // 取消
    cancelForm() {
      this.$refs.scheduleForm.resetFields()
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.newSchedul {
  padding: 0 20px;
  padding-bottom: 50px;
  .nav-title {
    padding-left: 10px;
    margin: 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #353535;
    border-left: 2px solid #2377e6;
  }
  .course-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 480px;
    height: 60px;
    padding: 10px 20px 10px 10px;
    color: #353535;
    font-size: 0;
    background: #f5f7fa;
    .course-title {
      width: 210px;
      overflow: hidden;
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .foot-btn {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: calc(100vw - 180px);
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #eee;
    text-align: center;
    background-color: #fff;
    z-index: 9;
  }
  .chargeStandard {
    width: 800px;
    /deep/.el-table td,
    /deep/.el-table th {
      padding: 0;
    }
    /deep/.el-table__body {
      .el-table__row {
        height: 50px;
      }
    }
    .add-foot {
      text-align: center;
      border-bottom: 1px solid #eee;
      margin-bottom: 30px;
    }
  }
}
</style>
